<template>
    <div>
        <h1>Vue组件基本属性</h1>
        <p>{{ msg }}</p>
        <p>{{ num }}</p>
        <p>{{ isBool }}</p>
        <p>{{ arr }}</p>
        <p>{{ arr[1] }}</p>
        <p>{{ obj }}</p>
        <p>{{ obj.c }}</p>
        <h1>props</h1>
        <h3>{{ title }}</h3>
        <button @click="butt">点击按钮</button>
        <h2>computed</h2>
        <button @click="zj">点击按钮增加</button>
        <button @click="js">点击按钮减少</button>
        <p>{{ num }}</p>

    </div>

</template>

<script>
    export default{
        data(){
            return{
            msg:"test",
            num:1,
            isBool:true,
            arr:[1,2,3],
            obj:{
                a:1,
                b:2,
                c:"测试"
            }
            }
        },
        props:{
            title:"props的内容"
        },    
        methods:{
            butt(){
                console.log("13213213")
                // console.log(this.testt)
                this.testt()
            },
            testt(){
                console.log("调用了testt方法")
            },
            zj(){
                this.num  = this.num+1
            },
            js(){
                this.num  = this.num-1
            }
        },
        computed:{
            num2(){
                return this.num + 1
            }
        }
    }
</script>
